<div class='steps-docfile'>
    <ng-container >
        <div class="fileP">
            <nz-select appBtnPermiss [permissId]="btnPerssion.choice" style="width:250px;height:32px;vertical-align: middle" [(ngModel)]="FileType"  name="xzmb" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="选择文书类型">
                <nz-option *ngFor="let doc of AllFileType" [nzValue]="doc.filetype" [nzLabel]="doc.filetype">{{doc.filetype}}</nz-option>
            </nz-select>
            <ng-container *ngIf="FileType!='其他'" >
              <button appBtnPermiss [permissId]="btnPerssion.insert" class='btn btn-uploadfile' style='border-left:none'  [ngClass]="{'uploadBtnDisabled':!FileType,uploadBtn:FileType}"    (click)="createdDoc()">新建文书</button>
            </ng-container>
            <button   appBtnPermiss [permissId]="btnPerssion.upload" *ngIf="FileType=='其他'" class='btn btn-uploadfile ' [ngClass]="{'uploadBtnDisabled':!FileType,uploadBtn:FileType}" style='border-left:none' (click)="showModalUpload('bizfile')"> 上传文书 </button>
            <span> 
              <button  appBtnPermiss [permissId]="btnPerssion.evidence" class='btn btn-uploadfile uploadBtn' (click)="showModalUpload('evidence')">上传证据</button>
            </span>
            <button class='steps-issued btn'  (click)="taskShow()">
                下发终端任务
            </button> 
            <nz-modal 
              [(nzVisible)]="taskVisible"
              nzTitle="下发终端任务"
              (nzOnCancel)="taskVisible = false"
              (nzOnOk)="sendTask()"
              [nzOkLoading]="isOkLoading"
            > 
              <div class='taskmatter'>
                <div>
                    <span>办理事项：</span>
                    <nz-select class='select' style="width: 160px;vertical-align: middle;margin-right:10px;"  nzPlaceHolder='请选择' [(ngModel)]='taskmatter'  [nzSuffixIcon]='icon'   [nzSuffixIcon]='icon' nzAllowClear='false'>
                        <nz-option nzValue="调查取证" nzLabel="调查取证" >调查取证</nz-option>
                        <nz-option nzValue="线索核查" nzLabel="线索核查" >线索核查</nz-option> 
                     </nz-select>
                </div>
                <div>
                      <span>任务描述：</span>
                      <textarea placeholder="备注信息" [(ngModel)]="describe"></textarea>
                </div> 
              </div>
            </nz-modal> 
          </div>
         
    </ng-container>   
</div>
 
<ng-template #icon>
    <i nz-icon nzType="caret-down" nzTheme="outline"></i>
</ng-template> 

<nz-modal [(nzVisible)]="isVisible" nzMaskClosable="false" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
    <ng-template #modalTitle>
        证据详情
    </ng-template>

    <ng-template #modalContent>
        <!-- 文件类型为视频 -->
        <div *ngIf="publictypeFlag.includes('video')">
            <ng-container *ngIf='!typeFlag'>
                <nz-spin nzSimple style='margin-top:10px'></nz-spin>
          </ng-container>
          <ng-container *ngIf='typeFlag'>
            <vg-player>
                <video id="my-video" #video [vgMedia]="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1280px" height="720px" data-setup="{}" autoplay>
                <source [src]="url"  >
                <p class="vjs-no-js">播放视频需要启用JavaScript，推荐使用支持HTML5的浏览器访问。
                    To view this video please enable JavaScript, 
                    and consider upgrading to a web browser that
                <a href="http://videojs.com/html5-video-support/" target="_blank">
                    supports HTML5 video</a>
                </p>
           </video>
            </vg-player>
          </ng-container>
        </div>
        <div *ngIf="publictypeFlag.includes('audio')">
            <ng-container *ngIf='!typeFlag'>
                <nz-spin nzSimple style='margin-top:10px'></nz-spin>
           </ng-container>
           <ng-container *ngIf='typeFlag'>
              <vg-player style="height: 50px;">
                  <vg-controls vgFor='myAudio'>
                      <vg-play-pause></vg-play-pause>    
                      <vg-playback-button></vg-playback-button>
  
                      <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
  
                      <vg-scrub-bar>
                          <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                          <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                      </vg-scrub-bar>
  
                      <vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
                      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
  
                      <vg-mute></vg-mute>
  
                      <vg-fullscreen></vg-fullscreen>
                  </vg-controls>
  
                  <audio #audio class="audio" [vgMedia]="audio" id='myAudio' type='audio/mp3' autoplay=false preload="auto">
                    <source [src]="url">
                </audio>
              </vg-player>
           </ng-container>
         
        </div>
        <div *ngIf="publictypeFlag.includes('image')">
            <ng-container *ngIf='!typeFlag'>
                <nz-spin nzSimple style='margin-top:10px'></nz-spin>
           </ng-container>
           <ng-container *ngIf='typeFlag'>
              <div>
                  <img [src]="url" alt="" style="display: block;width:100%;height:100%;">
              </div>
           </ng-container>
        </div>
    </ng-template>

    <ng-template #modalFooter>
        <button nz-button nzType="primary" (click)="handleCancel()">关闭</button>
    </ng-template>
</nz-modal>
<nz-modal [(nzVisible)]="isVisibleUpload" nzZIndex="-1" nzWidth="800" nzMaskClosable="false" [nzTitle]="modalTitleUpload" [nzContent]="modalContentUpload" [nzFooter]="modalFooterUpload" (nzOnCancel)="handleCancelUpload()">


    <ng-template #modalTitleUpload>
        <span appBtnPermiss [permissId]="btnPerssion.evidence" *ngIf="choose == 'evidence'">证据上传</span>
        <span appBtnPermiss [permissId]="btnPerssion.upload" *ngIf="choose == 'bizfile'">文书上传</span>
    </ng-template>

    <ng-template #modalContentUpload>
        <!-- 视频控件 -->
        <p class=uploadTitle> 
            <span>案件环节：</span>
            <nz-select style="width: 150px;vertical-align: middle;border-radius: 0;" name="uploadEvidence" [(ngModel)]="currentLinkUpload" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                <!-- <nz-option [nzValue]="clueOrigin.value" [nzLabel]="clueOrigin.name" *ngFor="let clueOrigin of clueOriginList"></nz-option> -->
                <nz-option nzValue="线索" nzLabel="线索"></nz-option>
                <nz-option nzValue="立案" nzLabel="立案"></nz-option>
                <nz-option nzValue="调查取证" nzLabel="调查取证"></nz-option>
                <nz-option nzValue="处罚决定" nzLabel="处罚决定"></nz-option>
                <nz-option nzValue="执行与结案" nzLabel="执行与结案"></nz-option>
                <nz-option nzValue="强制执行" nzLabel="强制执行"></nz-option>
            </nz-select>
            <span style="height: 32px;margin-left: 10px;padding:7px;border-radius:5px;background: #31C374;cursor: pointer;" class="uploadfile">
                <nz-upload
                nzDisabled="{{!currentLinkUpload}}"
                nzAction="###"
                [nzShowUploadList]=false
                [nzCustomRequest]="customReq">
                    <div class="ant-upload-text" style="color: #fff;">
                      <ng-container appBtnPermiss [permissId]="btnPerssion.evidence" *ngIf="choose == 'evidence'">上传证据</ng-container>
                      <ng-container appBtnPermiss [permissId]="btnPerssion.upload" *ngIf="choose == 'bizfile'">上传文书</ng-container>
                    </div>
                </nz-upload>
            </span>
        </p>
        <table style="width: 100%;" class='uploadModal'>
            <thead style="border-bottom: 1px solid #ddd;">
                <tr>
                    <td width="15%" align="center">序号</td>
                    <td>名称</td>
                    <td>所属环节</td>
                    <td width="25%">操作</td>
                </tr>
            </thead>
            <tbody *ngIf="choose =='evidence'">
                <ng-container *ngFor="let item of evidenceList;let i= index;">
                <tr  *ngIf="item.evidenceState!='三方系统'">
                    <td width="10%" align="center">{{i+1}}</td>
                    <td>
                        <i><img src="/assets/image/wenbook.png" alt=""></i>
                        <a class='changedTag' (click)="changeTag(i,item)">{{item.fileName}}</a>
                    </td>
                    <td width='15%'>{{item.filingLink}}</td>
                    <td class="btnAlign" width="30%">
                        <button class="modify" [hidden]="fileNameIndex == i" (click)="changeTag(i,item)"><a>修改</a></button>
                        <button class="save" [hidden]="fileNameIndex != i" #save (click)="saveName(i,item)"><a>保存</a></button>
                        <button class="delete"><a style="color: red" (click)="deleteFile(item.id?item.id:item.fileid,item.docSource)">删除</a></button>
                    </td>
                </tr> 
              </ng-container>
            </tbody>

            <tbody *ngIf="choose == 'bizfile'">
              <ng-container *ngFor="let item of bizfileListOther;let i= index;">
                  <tr >
                      <td width="10%" align="center">{{i+1}}</td>
                      <td>
                          <i><img src="/assets/image/wenbook.png" alt=""></i>
                          <a class='changedTag' (click)="changeTag(i,item)">{{item.filename}}</a>
                      </td>
                      <td width='15%'>{{item.stage}}</td>
                      <td class="btnAlign" width="30%">
                          <button class="modify" [hidden]="fileNameIndex == i" (click)="changeTag(i,item)"><a>修改</a></button>
                          <button class="save" [hidden]="fileNameIndex != i" #save (click)="saveName(i,item)"><a>保存</a></button>
                          <button class="delete"><a style="color: red" (click)="deleteFile(item.fileid,item.docSource)">删除</a></button>
                      </td>
                  </tr>
              </ng-container>
            </tbody>
        </table>
        <div class="example" *ngIf="loading">
            <nz-spin nzSimple [nzSize]="'large'" nzTip="请稍等..." [nzSpinning]="loading"></nz-spin>
        </div>
    </ng-template>

    <ng-template #modalFooterUpload style="text-align: center">
        <button nz-button nzType="default" (click)="handleCancelUpload()">关闭</button>
    </ng-template>
</nz-modal>